define(['vue'], function(Vue){  
	var templatestr='<li>\
			<div class="x-title" @tap="toggle" style="width:100%;" v-if="(!$root.isSearch)||nodeShow">\
			<template v-if="haschildren">\
			<i class="icon icon-arrowdown"  v-if="model.open"></i>\
			<i class="icon icon-arrowright"  v-else="model.open"></i>\
			</template>\
			<template v-else="haschildren">\
			<i class=" icon icon-rdodown-fill "  v-if="checked"></i>\
			<i class=" icon icon-rdodown "  v-else="checked"></i>\
			</template>\
			<span style="display:-moz-inline-box; display:inline-block; width:150px;line-height: 30px;" >\
			{{model.name}}\
			</span>\
			</div>\
			<ul v-show="model.open" v-if="haschildren"  class="x-node">\
			<tree class="x-item" v-for="item in model.children"  :model="item" :key="item.id" v-show="item.open" >\
			</tree>\
			</ul>\
			</li>';
	  
     // 初始化树
     var init = function(opt){
      if (!opt.el)
       return false
       
	  Vue.component('tree',  {
	  	template : templatestr,
	  	props : {
	  		model : Object
	  	},
	  	data : function() {
	  		return {
	  			//open : false,
	  			checked : false,
	  			nodeShow: false
	  		}
	  	},
	  	computed : {
	  		haschildren : function() {
	  			return this.model.children && this.model.children.length
	  		}
	  	},
	  	methods : {
	  		toggle : function() {
	  			if (this.haschildren) {
	  				this.model.open = !this.model.open
	  			} else {
	  				if(!this.model.path)
	  				  this.model.path=this.getPath(this.model.name)
	  				//单选
	  				if (!this.$root.multiple){
	  				 this.$root.selected(this.model)	
	  				}else{
	  				  //多选
	  				  this.checked=!this.checked;
	  				  if (this.checked){
	  				  	this.$root.selectedList.push(this.model)
	  				  }else{
	  				  	var idx =this.$root.selectedList.indexOf(this.model)
	  				  	this.$root.selectedList.splice(idx,1)
	  				  };
	  				}
	  			}
	  		},
	  		getPath:function(str){
	  			if (this.$parent!=this.$root){
	  			  str=this.$parent.model.name+'-'+str
	  			  return this.$parent.getPath(str)
	  			}
	  			else
                  return str 
	  		}
	  	},
	  	updated : function() {
	  		this.$nextTick(function(){ this.$root.refreshScroll()})
	  	}
	  });
	  
	  
	  
	  // 实例化树
	  var treeVm = new Vue({
	  	el : opt.el,
	  	data : {
	  		elString:opt.el,
	  		treeData : {},
	  		searchData:"",
	  		multiple:opt.multiple,
	  		selectedList:[],
	  		isSearch:false,
	  		nodeShow: false
	  	},
	  	methods : {
	  		initTree : function(data) {
	  		    this.selectedList=[]
	  			this.treeData = data
	  		},
	  		selected:function(data){
	  		  //子节点选择后的处理函数，需外部重写
	  		},
	  		refreshScroll:function(){
	  		  //加载子节点后刷新滚动条，需外部重写
	  		},
	  		commit:function(){
	  		  //多选确认键后
	  		  this.selected(this.selectedList)
	  		},
	  		searchNode:function(node,keyword){
	  			//匹配的结果点亮路径
	  			if (node.$children.length>0){
	  				var havetrue = false
	  				for(i in node.$children){
	  					if (this.searchNode2(node.$children[i],keyword))
	  					  havetrue = true
	  				}
	  				node.nodeShow = node.model.open = havetrue
	  				return node.nodeShow
	  			}else{
	  				node.nodeShow = (node.model.name.indexOf(keyword)>-1)
	  				return node.nodeShow 
	  			}
	  		}
	  	},
	  	watch:{// 根据搜索框内容重新渲染数据
	  		searchData:function(val,oldVal){
	  			if(val.length>0){
	  				this.isSearch = true
	  				this.searchNode(this,val)
	  			}else{
	  				//更新所有的nodeshow为false
	  				this.isSearch = false
	  			}
	  		}
	  	}
	  })
	  
	  return treeVm;
	  
     }
     return {init:init};  
})  
